<template>
	<view>
		<!-- 海报 -->
		<canvas canvas-id="zwyPoster" :key="Math.random()" :style="{width:cansWidth,height:cansHeight}" class="isCan"></canvas>
		<view class="bg" @click="closeCans"></view>
		<view class="fixedBox" :style="{top: topNum + 'px'}">
			<view class="response flex flex-direction align-center">
				<view class="cu-btn bg-main radius" style="width: 240upx;" @click="saveCans">保存图片</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {

		},
		data() {
			return {
				// 海报
				cansWidth: 0, //海报宽度
				cansHeight: 0, //海报高度
				topNum:0,
				userInfo: {},
				ctx:undefined
				// 海报
			};
		},
		created() {
			this.cansWidth = uni.getSystemInfoSync().windowWidth;
			this.cansHeight = this.$math._mul(this.cansWidth,1.5);
			this.topNum = this.cansHeight - 122;
			this.ctx = uni.createCanvasContext('zwyPoster', this);
			var that = this;
			that.$network.request("UserAction/init", {}, function(res) {
				that.userInfo = res.data.user;
				uni.showToast({
					title:'请稍等',
					icon: 'loading',
					duration: 4000
				})
				//绘制海报底色为白色
				that.drawBaseBg('#d03233').then(() => {
					that.drawBg({
						url: that.$host + 'share_bg.png',
						sLeft: 0,
						sTop: 0,
						sWidth: 0.92,
						sHeight: 0.92
					})
				}).then(() => {
					that.drawText({
						text: '邀请码: '+that.userInfo.userId,
						sLeft: 'center',
						sTop: .73,
						fontSize: 13,
						color: '#d03233'
					})
				})

			}, "", function(res) {
				console.error(JSON.stringify(res))
				uni.showToast({
					icon: 'none',
					title: '加载失败',
					duration: 1200
				})
			});

		},
		computed: {
			
		},
		methods: {
			drawBaseBg(bgColor) {
				return new Promise((resolve, reject) => {
					setTimeout(() => {
						this.ctx.rect(0, 0, this.cansWidth, this.cansHeight)
						this.ctx.setFillStyle(bgColor)
						this.ctx.fill()
						this.ctx.draw()
						resolve()
					}, 200)
				})
			},
			circleImg(img, x, y, r) {
				return new Promise((resolve, reject) => {
					uni.getImageInfo({
						src: img
					}).then((image) => {
						x = Math.ceil(this.cansWidth * x)
						y = Math.ceil(this.cansHeight * y)
						this.ctx.save();
						var d = 2 * r;
						var cx = x + r;
						var cy = y + r;
						this.ctx.arc(cx, cy, r, 0, 2 * Math.PI);
						this.ctx.clip();
						this.ctx.drawImage(image[1].path, x, y, d, d);
						this.ctx.restore();
						this.ctx.draw(true);
					})
				})
			},
			closeCans() {
				this.$emit('hidePoster')
			},
			saveCans() {
				uni.showLoading({
					title: '保存ing...',
					mask: true
				})
				uni.canvasToTempFilePath({
					x: 0,
					y: 0,
					width: this.cansWidth * 1.5,
					height: this.cansHeight * 1.5,
					destWidth: this.cansWidth * 3,
					destHeight: this.cansHeight * 3,
					canvasId: 'zwyPoster',
					success: function(res) {
						uni.hideLoading()
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function(res) {
								uni.showToast({
									title: '保存相册成功'
								})
							},
							fail(res) {
								console.log(res)
								if (res.errMsg == "saveImageToPhotosAlbum:fail auth deny") {
									uni.showModal({
										title: '您需要授权相册权限',
										success(res) {
											if (res.confirm) {
												uni.openSetting({
													success(res) {

													},
													fail(res) {
														console.log(res)
													}
												})
											}
										}
									})
								}
							}
						});
					},
					fail(res) {
						uni.hideLoading()
					}
				}, this)
			},
			drawPara(item) {
				setTimeout(() => {
					var redIndexObj = {}
					if (item.redWord.length > 0) {
						for (var i = 0; i < item.redWord.length; i++) {
							let startIndex = 0,
								index;
							while ((index = item.para.indexOf(item.redWord[i], startIndex)) > -1) {
								redIndexObj[index] = true;
								for (var j = 0; j < item.redWord[i].length; j++) {
									redIndexObj[index + j] = true
								}
								startIndex = index + 1;
							}
						}
					}
					this.ctx.font = `normal normal ${item.fontSize}px sans-serif`;
					this.ctx.setFillStyle(item.color)
					var isLeft
					if (item.sLeft == 'center') {
						isLeft = this.cansWidth * (.5 - item.sMaxWidth / 2) - item.fontSize
					} else {
						isLeft = item.sLeft * this.cansWidth
					}
					var maxWidth = Math.floor(this.cansWidth * item.sMaxWidth)
					var tempList = item.para.split('')
					var nowText = '',
						isCol = 0,
						textWidth = 0
					for (var i = 0; i < tempList.length; i++) {
						if (i > 0) {
							nowText += tempList[i - 1]
						} else {
							nowText += tempList[0]
						}
						textWidth = this.ctx.measureText(nowText).width
						if (textWidth > maxWidth) {
							isCol++
							nowText = '占'
							textWidth = this.ctx.measureText(nowText).width
						}
						if (redIndexObj[i]) {
							this.ctx.save()
							if (item.bold) this.ctx.font = `normal bold ${item.fontSize}px sans-serif`;
							this.ctx.setFillStyle(item.redColor)
						}
						this.ctx.fillText(tempList[i], isLeft + textWidth, item.sTop * this.cansHeight + item.titleHeight * isCol)
						this.ctx.restore()
					}
					this.ctx.draw(true)
				}, 500)
			},
			drawBg(item) {
				return new Promise((resolve, reject) => {
					uni.getImageInfo({
						src: item.url
					}).then((image) => {
						if (item.sLeft == 'center') {
							this.ctx.drawImage(image[1].path, this.cansWidth * (.5 - item.sWidth / 2), this.cansHeight * item.sTop, this
								.cansWidth * item.sWidth, this.cansHeight * item.sHeight);
						} else {
							this.ctx.drawImage(image[1].path, this.cansWidth * item.sLeft, this.cansHeight * item.sTop, this.cansWidth *
								item.sWidth, this.cansHeight * item.sHeight);
						}
						this.ctx.draw(true);
						resolve()
					})
				})
			},
			drawText(item) {
				setTimeout(() => {
					var isLeft
					if (item.sLeft == 'center') {
						isLeft = this.cansWidth * .5 - (item.fontSize * item.text.length) / 2
					} else {
						isLeft = item.sLeft * this.cansWidth
					}
					this.ctx.save()
					if (item.bold) this.ctx.font = `normal bold ${item.fontSize}px sans-serif`;
					this.ctx.setGlobalAlpha(1) //不透明
					this.ctx.setFillStyle(item.color)
					this.ctx.setFontSize(item.fontSize)
					if (item.text instanceof Array) {
						if (!item.lineHeight) item.lineHeight = item.fontSize + 2
						console.log('我是数组', item.text)
						for (var i = 0; i < item.text.length; i++) {
							this.ctx.fillText(item.text[i], isLeft, item.sTop * this.cansHeight + item.lineHeight * i)
						}
					} else {
						console.log('我是字符串', item.text)
						this.ctx.fillText(item.text, isLeft, item.sTop * this.cansHeight)
					}
					this.ctx.draw(true)
					this.ctx.restore()
				}, 500)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bg {
		width: 100%;
		height: 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 998;
		background-color: #d03233;
	}

	.fixedBox {
		width: 100%;
		position: fixed;
		left: 0;
		z-index: 1000;
	}

	.btnHover {
		height: 55upx !important;
		border-bottom: 0 #F6BE3C solid !important;
		transform: translateY(3px) translateZ(0px) !important;
	}

	.isCan {
		position: fixed;
		left: 30upx;
		z-index: 999;
		width: calc(100% - 60upx);
		height: calc(100% - 60upx);
		top: 30upx;
		background-size: 100%;
	}
</style>
